

    <!-- 主内容区 -->
    <main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden" id="mainContent">
    <{include file="main_header.html"}>
        
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto p-6 scrollbar-thin">
            <!-- 操作工具栏 -->
            <div class="bg-white rounded-xl shadow-sm border border-neutral-200 mb-6 p-5">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center">
                        <button id="addWorkflowBtn" class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors">
                            <i class="fa fa-plus mr-1"></i> 新增审核流程
                        </button>
                    </div>
                    <div class="flex items-center space-x-3">
                        <div class="relative">
                            <input type="text" id="searchWorkflow" placeholder="搜索流程名称/ID" class="bg-neutral-100 border border-neutral-200 text-sm rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                        </div>
                        <div class="relative">
                            <select id="filterApplyType" class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部适用类型</option>
                                <option value="媒体">媒体</option>
                                <option value="言论">言论</option>
                                <option value="合集">合集</option>
                                <option value="认证">认证</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        <div class="relative">
                            <select id="filterStatus" class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 流程列表 -->
            <div class="bg-white rounded-xl shadow-sm border border-neutral-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full" id="workflowTable">
                        <thead>
                            <tr class="bg-neutral-50 text-left">
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">ID</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">流程名称</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">适用类型</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">审核步骤</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">创建时间</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">更新时间</th>
                                <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-neutral-200 bg-white" id="workflowTableBody">
                            <!-- 表格内容将通过JS动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="px-5 py-4 border-t border-neutral-200 flex items-center justify-between">
                    <div class="text-sm text-neutral-500 pagenation">
                        显示 1 至 10 条，共 24 条
                    </div>
                    <div class="flex space-x-1" id="paginationContainer">
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">2</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">3</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 新增/编辑流程模态框 -->
    <div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="workflowModal">
        <div class="bg-white rounded-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
            <div class="p-5 border-b border-neutral-200 flex items-center justify-between">
                <h3 class="text-lg font-bold" id="modalTitle">新增审核流程</h3>
                <button id="closeModal" class="text-neutral-400 hover:text-neutral-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-1 overflow-y-auto p-5">
                <form id="workflowForm">
                    <input type="hidden" id="workflowId">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1" for="flowId">业务ID</label>
                            <input type="text" id="flowId" class="w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如FLW-2468" required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1" for="name">流程名称</label>
                            <input type="text" id="name" class="w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入流程名称" required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1" for="applyType">适用类型</label>
                            <div class="relative">
                                <select id="applyType" class="appearance-none w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择适用类型</option>
                                    <option value="媒体">媒体</option>
                                    <option value="言论">言论</option>
                                    <option value="合集">合集</option>
                                    <option value="认证">认证</option>
                                    <option value="其他">其他</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1" for="status">状态</label>
                            <div class="relative">
                                <select id="status" class="appearance-none w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <div class="flex items-center justify-between mb-3">
                            <label class="block text-sm font-medium text-neutral-700">审核步骤配置</label>
                            <button type="button" id="addStepBtn" class="text-primary hover:text-primary/80 text-sm flex items-center">
                                <i class="fa fa-plus-circle mr-1"></i> 添加步骤
                            </button>
                        </div>
                        
                        <!-- 步骤容器 -->
                        <div id="stepsContainer" class="bg-neutral-50 p-4 rounded-lg border border-neutral-200">
                            <div class="flex items-center mb-4" id="stepsPreview">
                                <!-- 步骤预览将通过JS动态生成 -->
                                <div class="text-neutral-500 text-sm py-2">请添加审核步骤</div>
                            </div>
                            
                            <div id="stepsList" class="space-y-4">
                                <!-- 步骤列表将通过JS动态生成 -->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="p-5 border-t border-neutral-200 flex justify-end space-x-3">
                <button id="cancelWorkflowBtn" class="px-4 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors text-neutral-700">取消</button>
                <button id="saveWorkflowBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存流程</button>
            </div>
        </div>
    </div>
    
    <!-- 确认删除模态框 -->
    <div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="deleteModal">
        <div class="bg-white rounded-xl w-full max-w-md p-6">
            <h3 class="text-lg font-bold mb-2">确认删除</h3>
            <p class="text-neutral-500 mb-4">您确定要删除此审核流程吗？删除后将无法恢复。</p>
            <input type="hidden" id="deleteWorkflowId">
            <div class="flex space-x-3">
                <button id="cancelDeleteBtn" class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors">取消</button>
                <button id="confirmDeleteBtn" class="flex-1 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors">确认删除</button>
            </div>
        </div>
    </div>
    
    <script src="/i/js/audit.workflow.js"></script>